<template>
  <div class="bg-f2">
    <el-row :gutter="20" class="bg-fff" style="margin: 0; padding: 0 15px">
      <el-col :span="22" style="padding: 0">
        <el-tabs class="tabsbd" tab-position="right" :style="{ height: transferHeight + 'px' }" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="item.jsmc" :name="item.id + ''" v-for="item in roleNameList" :key="item.id" v-loading="tableLoad" class="cccc">
            <div>{{ tableMessage }}</div>
            <el-tabs type="card" class="noScorllFixed" v-model="activeName2">
              <el-tab-pane :label="item.qxmc" :name="item.qxmc" v-for="item in roleList" :key="item.id">
                <el-collapse :accordion="true" @change="collapseChange">
                  <el-collapse-item v-for="item2 in item.children" :key="item2.id">
                    <template slot="title">{{ item2.qxmc }}</template>
                    <div class="checkItem">
                      <span class="checkbox_item" v-for="item3 in item2.children" :key="item3.id">
                        {{ item3.qxmc }}
                        <el-tooltip content="四级按钮权限" placement="right-start" effect="light" v-if="item3.children === null || item3.children.length > 0 ? true : false">
                          <span @click.prevent="haha(item3, $event)">
                            <i :class="[iconBtn]" :id="'sBtn' + item3.id" style="margin-left: 5px; font-size: 16px" ref="SJBTN"></i>
                          </span>
                        </el-tooltip>
                      </span>
                      <div v-if="showSJ">
                        <span class="checkbox_item2" v-for="siItem in sijiList[2].children" :key="siItem.id">{{ siItem.qxmc }}</span>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
export default {
  data: function () {
    return {
      roleNameList: [], // 右侧数据源
      roleList: [], // 左侧数据源
      activeName: '', // 右侧tab绑定值
      activeName2: '', // 左侧tab绑定值
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      iconBtn: 'el-icon-arrow-right',
      sijiList: [],
      showSJ: false,
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    //   获取角色名称
    this.getRoleNameList()
    // 获取角色权限
    // this.getRoleList()
  },
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return window.innerHeight - threeLevelH
    },
  },
  methods: {
    async getRoleNameList() {
      const { data: res } = await this.$http.post(`${pinT}juese/selectJueSe`)
      if (res.code === '0014') {
        return ''
      } else if (res.code === '0013') {
        return (this.roleNameList = [])
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.roleNameList = res.data.list
      this.activeName = res.data.list[0].id + ''
      this.getRoleList()
    },
    async getRoleList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('js_id', this.activeName)
      const { data: res } = await this.$http.post(`${pinT}juese/getJueSeQuanXian`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data
          this.activeName2 = res.data[0].qxmc
          break
        case '0013':
          this.roleList = []
          this.activeName2 = ''
          break
        default:
          this.roleList = []
          this.activeName2 = ''
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false
    },
    // 展开四级权限
    haha(val3, e) {
      this.$refs.SJBTN.forEach((item) => {
        if (item.id === 'sBtn' + val3.id) {
          if (item.className === 'el-icon-arrow-right') {
            item.className = 'el-icon-arrow-down'
            this.showSJ = true
          } else {
            item.className = 'el-icon-arrow-right'
            this.sijiList = []
            return (this.showSJ = false)
          }
        } else {
          if (item.className === 'el-icon-arrow-down') {
            this.sijiList = []
            this.showSJ = false
          }
          item.className = 'el-icon-arrow-right'
          this.sijiList.push(val3)
          this.showSJ = true
        }
      })
      if (e.target.className === 'el-icon-arrow-right') {
        this.sijiList = []
        return (this.showSJ = false)
      }
    },
    // 四级选项bug
    collapseChange(val) {
      this.sijiList = []
      this.showSJ = false
      this.iconBtn = 'el-icon-arrow-right'
      this.$refs.SJBTN.forEach((item) => {
        item.className = 'el-icon-arrow-right'
      })
    },
    handleClick(val) {
      this.getRoleList()
      // this.roleNameList.forEach(vals => {
      //   if (val.label === vals.jsmc) {
      //     this.roleList = vals.allQXList
      //     if (vals.allQXList.length !== 0) {
      //       this.activeName2 = vals.allQXList[0].qxmc
      //     }
      //   }
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
.noScorllFixed {
  padding: 15px 0;
}
::v-deep .el-tabs__nav-scroll {
  position: relative !important;
  z-index: 55;
  width: 100%;
  border-left: 1px solid #e4e7ed;
}
.checkbox_item2 {
  display: inline-block;
  padding: 10px 30px 0 30px;
  height: 30px;
  line-height: 30px;
}
// ::v-deep .el-tabs__nav-scroll::after {
//   content: '';
//   position: absolute;
//   left: 0;
//   bottom: 0;
//   width: 100%;
//   height: 1px;
//   background-color: #e4e7ed;
//   z-index: 1;
// }
::v-deep .noScorllFixed .el-tabs__nav-scroll {
  //   position: relative !important;
  //   z-index: 55;
  //   width: 100%;
  border-left: none;
}

// ::v-deep .el-tabs__header {
//   border: none !important;
// }
.el-collapse {
  margin-top: 10px;
  height: 100%;
  border-left: 1px solid #e4e7ed;
  border-right: 1px solid #e4e7ed;
  .checkItem {
    margin: 15px 18px 0 18px;
  }
  .checkbox_item {
    margin-right: 105px;
    font-size: 14px;
  }
}
</style>
